import React, { Component } from 'react';
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  VolumeMenuButton,
  BigPlayButton,
  LoadingSpinner,
} from 'video-react';
import 'video-react/dist/video-react.css'; // import css
import axios from 'axios';
import { message } from 'antd';
import styles from './index.less';

class VideoC extends Component {
  // 默认值
  static defaultProps = {};

  state = {
    vedioSrc: '',
  };

  componentDidMount() {
    let query = window.location.href.split('?')[1];
    if (query) {
      this.getVedioData(query.split('=')[1]);
    }
  }

  // 获取视频文件流
  getVedioData = async (id) => {
    try {
      axios(`gateway/file/maat-admin/file/download?uniquekey=${id}`, {
        method: 'get',
        responseType: 'blob',
        headers: {
          hToken: localStorage.getItem('antd-pro-token'),
          'iv-user': localStorage.getItem('antd-pro-userId'),
        },
      }).then((res) => {
        // this.clearCookie()
        if (res.status == 200) {
          this.setState({
            //创建一个指向视频文件流的URL
            vedioSrc: URL.createObjectURL(res.data),
          });
        }
      });
    } catch (e) {
      message.error(JSON.stringify(e));
    }
  };

  render() {
    return (
      <>
        <div className={styles.videoPlayer}>
          <Player
            ref={(c) => {
              this.player = c;
            }}
            autoPlay={true}
            playsInline={true}
            src={this.state.vedioSrc}
          >
            {/* 播放按钮 */}
            <BigPlayButton position='center' />
            {/* 加载图标 */}
            <LoadingSpinner />
            {/* 控制组件 */}
            <ControlBar autoHide={false}>
              {/* 后退 */}
              {/* <ReplayControl seconds={10} order={1.1} /> */}
              {/* 暂停、播放按钮 */}
              <PlayToggle />
              {/* 倍速 */}
              {/* <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} /> */}
              {/* 音量 */}
              <VolumeMenuButton vertical />
            </ControlBar>
          </Player>
        </div>
      </>
    );
  }
}
// props默认值
VideoC.propsTypes = {};

export default VideoC;
